<template>
    <xc-upload ref="xcUploadRef" v-model:file-list="fileList" v-bind="cloneAtt" class="upload-demo" :multiple="multiple"
               :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="limit"
               :on-exceed="handleExceed"
    >
    </xc-upload>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import XcUpload from '@x-tech/fe-pc-components/src/components/XcUpload/index.vue';
import type { UploadProps, UploadFile } from 'element-plus';

export default defineComponent({
    name: 'uploadFile',
    components: {
        XcUpload,
    },
    props: {
        fileList: {
            type: Array as PropType<UploadFile[]>,
            default: () => [] as File[],
        },
        onPreview: {
            type: Function as PropType<(file: UploadFile) => void>,
            default: function () { },
        },
        listType: {
            type: String as PropType<'picture' | 'picture-card' | 'text'>,
            default: 'text',
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        limit: {
            type: Number,
            default: 1,
        }
    },
    emits: ['handleCurrentChange', 'handleSizeChange', 'handleSeletionChange', 'select', 'sortChange'],
    setup(props, { emit, attrs }) {
        const xcUploadRef: any = ref(null);
        const cloneAtt = attrs;

        const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
            console.log(file, uploadFiles);
        };

        const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
            console.log(uploadFile);
        };

        const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
            ElMessage.warning(
                `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
                } totally`
            );
        };

        const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
            return ElMessageBox.confirm(
                `Cancel the transfert of ${uploadFile.name} ?`
            ).then(
                () => true,
                () => false
            );
        };
        return {
            xcUploadRef,
            cloneAtt,
            handleRemove,
            handlePreview,
            handleExceed,
            beforeRemove
        };
    }
});

</script>
